<template>
  <div>
    <el-col :span="20">
      <el-button size="mini" type="primary" @click="insert()">增加</el-button>
      <el-button size="mini" type="warning" @click="stop()">停用</el-button>
      <el-button size="mini" type="success" @click="start()">启动</el-button>
      <el-button size="mini" type="danger" @click="del()">删除</el-button>
      <el-input v-model="searchInput" suffix-icon="el-icon-search" placeholder="设备类别名称" size="small"
                style="width: 120px" />
      <el-button @click="search(searchInput)">搜索</el-button>
    </el-col>
    <template v-if="tableData!=null">
      <el-table ref="multipleTable" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" label="全选" width="55">
        </el-table-column>
        <el-table-column type="index" width="50" label="序号" :index="indexMethod">
        </el-table-column>
        <el-table-column prop="name" label="设备类别" width="180">
        </el-table-column>
        <el-table-column prop="username" label="设备编码" width="150" >
        </el-table-column>
        <el-table-column prop="website" label="设备介绍" width="120">
        </el-table-column>
        <el-table-column prop="email" label="创建人" width="120">
        </el-table-column>
        <el-table-column prop="website" label="创建时间">
        </el-table-column>
        <el-table-column prop="phone" label="状态">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope"><!--查看功能没做好 -->
            <el-button
                    size="small" type="primary" plain
                    @click="handleView(scope.$index, scope.row)"><i class="el-icon-location"></i>查看</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleUpdate(scope.$index, scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-col :span="20"><!--翻页功能 -->
      <div class="page-item">
        <el-pagination background  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                       layout="total, sizes, prev, pager, next, jumper" :total="40"/><!--这个total
                                                                                              比tableData先渲染了，导致length
                                                                                              为null，待解决，先设为定值 -->
      </div>
    </el-col>
  </div>
</template>
<script>
    export default {
        data(){
            return{
                tableData:null,//所有数据
                currentPage:1,//当前页数
                pagesize:10,//分页数
                listSelect:[],
                searchInput:" ",
            }
        },
        methods:{
            getList(url) {//请求数据库，现在用自动生成的
                this.getRequest(url).then((res)=>{
                    console.log(res)
                    this.tableData=res.data
                    console.log(this.tableData.length)
                })
                    .catch((error)=>{
                        console.log(error)
                    })
            },
            insert(){
                console.log("增加设备");//弹框
            },
            stop(){
                console.log("停止设备");//根据序号选中
            },
            start(){
                console.log("启动设备");//根据序号选中,发送ajax改变状态字段
            },
            del(){
                console.log("删除设备");//根据序号选中
                console.log(this.listSelect)//被选中的对象数列表
                location.reload();
                //删除后刷新页面，清空选中列表
            },
            search(val){//搜索实现方式是否由后台决定
                if(val){
                    console.log(this.searchInput);
                }else{
                    alert("输入为空")
                }
            },

            indexMethod(index) {//序号递增
                return index+1;
            },
            handleUpdate(index, row){//修改
                console.log(index,row);
            },
            handleSizeChange: function (size) {//得到当前行数
                this.pagesize = size;

            },
            handleCurrentChange: function(currentPage){//得到当前
                this.currentPage = currentPage;
            },
            handleSelectionChange(val) {

                this.listSelect.push(val[val.length-1]);
                console.log(this.listSelect);
            }


        },
        created() {//构造时调用,向数据库请求设备列表
            this.getList('/users')
        },
        mounted(){},
        updated(){},
        destroyed(){},
    }
</script>
<style scoped>

</style>